<template>
	<div class="p_left">
		<div class="p_left_info p_left_info1" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
			<h1>技术</h1>
			<div class="p_left_t">
				<router-link :to="{name: 'position',params: { msg: 'PHP',sid: 'mzx' }}"><span>PHP</span></router-link>
				<span>JAVA</span>
				<span>数据挖掘</span>
				<span>IOS</span>
				<span>Html5</span>
				<span>Web前端</span>
			    <div class="right_wtite" v-if="one1"></div>
			</div> 
			<div class="p_right"  v-if="one">
				<div class="p_right_info">
					<h2>开发</h2>
					<div class="p_right1">
						<span>Java</span>
						<span>Php</span>
						<span>Python</span>
						<span>Ruby</span>
						<span>Node.JS</span>
						<span>.NET</span>
						<span>Asp</span>
						<span>C#</span>
						<span>C++</span>
						<span>C</span>
						<span>Delphi</span>
						<span>Go</span>
						<span>Docker</span>
						<span>Hadoop</span>
						<span>Spark</span>
						<span>HBase</span>
						<span>Openstack</span>
						<span>数据挖掘</span>
						<span>自然语言处理</span>
						<span>推荐系统</span>
						<span>搜索引擎</span>
						<span>全栈工程师</span>
					</div>
				</div>
				<div class="p_right_info">
						<h2>移动开发及前端</h2>
						<div class="p_right1">
							<span>IOS</span>
							<span>android</span>
							<span>U3D</span>
							<span>COCOS2D-X</span>
							<span>HTML5</span>
							<span>Web前端</span>
							<span>Flash</span>
							<span>Javascript</span>
						</div>
					</div>
					<div class="p_right_info">
						<h2>测试</h2>
						<div class="p_right1">
							<span>测试工程师</span>
							<span>自动化测试</span>
							<span>功能测试</span>
							<span>性能测试</span>
							<span>测试开发</span>
							<span>硬件测试</span>
						</div>
					</div>
					<div class="p_right_info">
						<h2>运维</h2>
						<div class="p_right1">
							<span>运维工程师</span>
							<span>工程师工程师</span>
							<span>网络工程师</span>
							<span>运维开发</span>
							<span>DBA</span>
						</div>
					</div>
					<div class="p_right_info">
						<h2>高端职位</h2>
						<div class="p_right1">
							<span>技术经理</span>
							<span>架构师</span>
							<span>技术总监</span>
							<span>CTO</span>
							<span>技术合伙人</span>
							<span>运维总监</span>
							<span>安全专家</span>
							<span>项目总监</span>
						</div>
					</div>
				</div>
		</div>
		
		<div class="p_left_info p_left_info2" @mouseenter="onMouseOver2" @mouseleave="onMouseOut2">
			<h1>产品</h1>
			<div class="p_left_t">
				<span>产品经理</span>
				<span>移动产品经理</span>
				<span>产品总监</span>
				<span>电商产品经理</span>
				<div class="right_wtite2" v-if="two1"></div>
			</div>
			<div class="p_right_two"  v-if="two">
				<div class="p_right_info">
					<h2>产品经理</h2>
					<div class="p_right1">
						<span>产品经理</span>
						<span>网页产品经理</span>
						<span>移动产品经理</span>
						<span>产品助理</span>
						<span>数据产品经理</span>
						<span>游戏策划</span>
						<span>电商产品经理</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>产品设计师</h2>
					<div class="p_right1">
						<span>网页产品设计师</span>
						<span>移动产品设计师</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>高端职位</h2>
					<div class="p_right1">
						<span>产品总监</span>
						<span>游戏制作人</span>
						<span>产品经理</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="p_left_info p_left_info3" @mouseenter="onMouseOver3" @mouseleave="onMouseOut3">
			<h1>设计</h1>
			<div class="p_left_t">
				<span>UI设计师</span>
				<span>APP设计师</span>
				<span>交互设计师</span>
				<span>设计总监</span>
				<div class="right_wtite3" v-if="three1"></div>
			</div>
			<div class="p_right_three" v-if="three">
				<div class="p_right_info">
					<h2>视觉设计</h2>
					<div class="p_right1">
						<span>UI设计师</span>
						<span>视觉设计师</span>
						<span>网页设计师</span>
						<span>APP设计师</span>
						<span>平面设计师</span>
						<span>flash设计师</span>
						<span>美术设计师</span>
						<span>广告设计师</span>
						<span>多媒体设计师</span>
						<span>原画师</span>
						<span>游戏特效</span>
						<span>游戏界面设计师</span>
						<span>游戏场景</span>
						<span>游戏角色</span>
						<span>游戏动作</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>交互设计</h2>
					<div class="p_right1">
						<span>交互设计师</span>
						<span>网页交互设计师</span>
						<span>无线交互设计师</span>
						<span>硬件交互设计师</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>用户研究</h2>
					<div class="p_right1">
						<span>数据分析师</span>
						<span>用户研究员</span>
						<span>游戏数值策划</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>高端职位</h2>
					<div class="p_right1">
						<span>设计经理</span>
						<span>设计总监</span>
						<span>交互设计经理</span>
						<span>交互设计总监</span>
						<span>用户研究经理</span>
						<span>用户研究总监</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="p_left_info p_left_info4" @mouseenter="onMouseOver4" @mouseleave="onMouseOut4">
			<h1>运营</h1>
			<div class="p_left_t">
				<span>内容运营</span>
				<span>产品运营</span>
				<span>用户运营</span>
				<span>新媒体运营</span>
				<span>游戏运营</span>
				<div class="right_wtite4" v-if="four1"></div>
			</div>
			<div class="p_right_four" v-if="four">
				<div class="p_right_info">
					<h2>运营</h2>
					<div class="p_right1">
						<span>运营经理</span>
						<span>运营专员</span>
						<span>内容运营</span>
						<span>产品运营</span>
						<span>用户运营</span>
						<span>活动运营</span>
						<span>数据运营</span>
						<span>新媒体运营</span>
						<span>商家运营</span>
						<span>原品类运营</span>
						<span>游戏运营</span>
						<span>网络推广</span>
						<span>海外运营</span>
						<span>网站运营</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>编辑</h2>
					<div class="p_right1">
						<span>副主编</span>
						<span>内容编辑</span>
						<span>文案策划</span>
						<span>记者</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>客服</h2>
					<div class="p_right1">
						<span>售前咨询</span>
						<span>售后服务</span>
						<span>淘宝客服</span>
						<span>客服经理</span>
					</div>
				</div>
				<div class="p_right_info">
					<h2>高端职位</h2>
					<div class="p_right1">
						<span>运营总监</span>
						<span>主编</span>
						<span>COO</span>
						<span>客服总监</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
    	name: 'PLeft',
        data () {
            return {
            	one : false,
            	two : false,
            	three : false,
            	four : false,
            	one1 : false,
            	two1 : false,
            	three1 : false,
            	four1 : false
            }
        },
        methods:{
        	load(){
        	},
        	onMouseOver(){
        		this.one = true
        		this.one1 = true
        	},
        	onMouseOut(){
        		this.one = false
        		this.one1 = false
        	},
        	onMouseOver2(){
        		this.two = true
        		this.two1 = true
        	},
        	onMouseOut2(){
        		this.two = false
        		this.two1 = false
        	},
        	onMouseOver3(){
        		this.three = true
        		this.three1 = true
        	},
        	onMouseOut3(){
        		this.three = false
        		this.three1 = false
        	},
        	onMouseOver4(){
        		this.four = true
        		this.four1 = true
        	},
        	onMouseOut4(){
        		this.four = false
        		this.four1 = false
        	}
        },
        mounted () {
			this.load();
		}
    }
</script>
<style scoped>
	.right_wtite,.right_wtite2,.right_wtite3,.right_wtite4{
		height: 98px;
		width: 1px;
		border: 1px solid #FFFFFF;
		position: absolute;
		right: -1px;
		z-index: 300;
	}
	.right_wtite{
		top: 1px;
	}
	.right_wtite2{
		top: 101px;
	}
	.right_wtite3{
		top: 201px;
	}
	.right_wtite4{
		top: 301px;
	}
	.p_left{
		width: 300px;
		height: 400px;
		position: relative;
	}
	.p_left_info:hover{
		border-left: 1px solid #2D8CF0;
		border-top: 1px solid #2D8CF0;
		border-bottom: 1px solid #2D8CF0;
	}
	.p_left_info{
		width: 300px;
		height: 100px;
		padding-left: 10px;
    	padding-top: 5px;
    	border: 1px solid #eee;
	}
	.p_left_info>h1{
	    font-size: 20px;
	    color: #2D8CF0;
	}
	.p_left_t{
		display: inline-block;
		margin-top: 5px;
	}
	.p_left_t>span{
		padding-right: 15px;
		font-size: 15px;
		margin-top: 3px;
		display: inline-block;
	}
	.p_left_t>span:hover{
		text-decoration: underline;
		color: #2D8CF0;
		cursor: pointer;
	}
	
	.p_right_info{
		margin-bottom: 10px;
	}
	.p_right_info>h2{
		font-size: 20px;
	    color: #2D8CF0;
	}
	.p_right{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 400px;
		top: 0px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_two{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 250px;
		top: 100px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_three{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 340px;
		top: 60px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right_four{
		padding: 10px 15px;
		position: absolute;
		border: 1px solid #2D8CF0;
		width: 700px;
		height: 340px;
		top: 60px;
		left: 300px;
		z-index: 200;
		background: #FFFFFF;
	}
	.p_right1>span{
		padding-right: 18px;
		font-size: 15px;
		margin-top: 3px;
		display: inline-block;
	}
	.p_right1>span:hover{
		text-decoration: underline;
		color: #2D8CF0;
		cursor: pointer;
	}
</style>

